.listItem {
  @apply bg-white rounded-16px px-24px h-192px flex flex-row gap-24px items-center box-border;
  &:nth-child(1) {
    .imageWrap {
      .mark {
        background: linear-gradient(180deg, #ff7c41 0%, #ff5000 100%);
      }
    }
  }
  &:nth-child(2) {
    .imageWrap {
      .mark {
        background: linear-gradient(180deg, #ddd 0%, #999 100%);
      }
    }
  }
  &:nth-child(3) {
    .imageWrap {
      .mark {
        background: linear-gradient(180deg, #edccb8 0%, #daae91 100%),
          linear-gradient(180deg, #ff7c41 0%, #ff5000 100%);
      }
    }
  }
}
.imageWrap {
  width: 144px;
  height: 144px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  @apply relative rounded-16px overflow-hidden;
  .mark {
    width: 46px;
    height: 46px;
    border-radius: 0 0 16px 0;
    background: rgba(0, 0, 0, 0.6);
    @apply text-[#ffffff] text-30px font-500 flex flex-row justify-center items-center box-border absolute left-0 top-0;
  }
}
.wordsquare {
  @apply box-border px-32px relative;
}
